/**
 * Created by 居胜 on 2016/6/7.
 */
+function (){

    //闭包，不暴露addClass, removeClass两个函数
    function addClass(obj, cls) {
        var obj_class = obj.className; //获取class内容
        var blank = (obj_class == "") ? "" : " ";
        var added = obj_class + blank + cls;
        obj.className = added; //替换class
    }

    function removeClass(obj, cls){
        var obj_class = " " + obj.className + " "; //首尾加空格
        obj_class = obj_class.replace(/(\s+)/gi, " "); //替换多余空格
        var removed = obj_class.replace(" " + cls + " ", " ");
        removed.replace(/(^\s+)|(\s+$)/g, "");
        obj.className = removed;
    }

    //obj ->添加到html的父元素
    //th-> th数据，数组
    //tds -> td数据，数组
    var Table = function (obj, ths, tds) {

        this.obj = obj;
        this.ths = ths;
        this.tds = tds;

        render(obj, this.ths, this.tds);
        //绑定排序事件
        bindSort(this.obj, this.ths, this.tds)
    };

    //渲染
    function render(obj, ths, tds) {
        var old = document.getElementsByClassName('my-table').item(0);
        if(old){
            obj.removeChild(old);
        }
        var tableNode = document.createElement('table');
        obj.appendChild(tableNode);
        addClass(tableNode, "my-table");

        addThs(tableNode, ths);
        addTds(tableNode, tds);
    }

    //添加ths
    function addThs(table, ths) {

        if(ths){
            var tr = document.createElement("tr");
            for(var n = 0; n<ths.length; n++){
                //临时th标签
                var th_temp = document.createElement('th');

                //arrows标签
                var arrows = document.createElement("div");
                addClass(arrows, "arrows");

                var up = document.createElement("div");
                addClass(up, "up");
                var down = document.createElement("div");
                addClass(down, "down");
                arrows.appendChild(up);
                arrows.appendChild(down);

                //th添加arrows
                th_temp.appendChild(arrows);

                //th添加内容
                var th_temp_text = document.createElement('span');
                th_temp_text.innerText = ths[n];
                th_temp.insertBefore(th_temp_text, arrows);

                //table添加新的th
                tr.appendChild(th_temp);
            }
            table.appendChild(tr);
        }
    }

    //添加tds
    function addTds(table, tds) {

        if(tds){
            console.log(tds.length)
            for(var i = 0; i<tds.length; i++){
                var tr = document.createElement("tr");
                for(var j = 0; j< tds[i].length; j++){
                    var td_temp = document.createElement("td");
                    td_temp.innerHTML = tds[i][j];
                    tr.appendChild(td_temp);
                }
                table.appendChild(tr);
            }
        }
    }

    function bindSort(obj, ths, tds) {
        document.addEventListener('click', function (event) {
            if(event.target.className.toUpperCase() =="UP" || event.target.className.toUpperCase() == "DOWN"){
                var flag = event.target.className.toUpperCase();
                var parent = event.target.parentNode.parentNode.parentNode;
                var childNodes = parent.childNodes;
                var index;
                //获取点击的是第几个th
                for(var i = 0; i<childNodes.length; i++){
                    if(childNodes[i].textContent == event.target.parentNode.parentNode.textContent){
                        index = i;
                    }
                }

                //对tds排序
                if(flag == "UP"){
                    tds.sort(function (a , b) {
                        return a[index] - b[index];
                    })
                    render(obj, ths, tds);
                }else if(flag=="DOWN"){
                    tds.sort(function (a , b) {
                        return b[index] - a[index];
                    })
                    render(obj, ths, tds);
                }
            }
        })
    }

    new Table(document.getElementById("container"),
                                     ['姓名', '语文', '数学', '英语', '总分'],
        [
            ['小明', 80, 90, 70, 240],
            ['小红', 90, 60, 90, 270],
            ['小亮', 60, 100, 70, 230],
        ])

}();